<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <div class="filter-container">
      <!-- 地图组件渲染 -->
      <div class="map-view" id="container">
      </div>
    </div>
  </div>
</template>

<style>
.map-view {
  height: 540px; /* 或其他高度值 */
  margin-top: 20px;
}
</style>

<script>
export default {
  name: 'GoadeApi',
  // 页面加载时钩子函数
  mounted() {
    this.initMap();
  },
  data() {
    return {
      name: '',
      tel: '',
      map: null,      // 地图对象
      circle: null,   // 圆形
      circleEditor: null, // 圆形编辑器
      scale: null,   // 比例尺插件
      toolbar: null,  // 工具条插件
      mouseTool: null,  // 鼠标工具
      newCircle: null,  // 绘制出来的快递员作业范围
      buttonText: this.$t('table.StartDrawing'),     // 生成按钮文字
      showAlert: false, // 控制 el-alert 显示/隐藏
    }
  },
  methods: {
    initMap() {
      // 创建地图
      this.map = new AMap.Map('container', {
        zoom: 14, // 设置地图级别
      });
      AMap.plugin(['AMap.Scale', 'AMap.ToolBar', 'AMap.MouseTool'], () => {
        // 比例尺插件
        this.scale = new AMap.Scale();
        this.map.addControl(this.scale);

        // 工具条插件
        this.toolbar = new AMap.ToolBar();
        this.map.addControl(this.toolbar);

        // 创建鼠标工具
        this.mouseTool = new AMap.MouseTool(this.map);
        this.map.addControl(this.mouseTool);
      });

      // 设置圆形位置(对应网点经纬度)
    //  let center = new AMap.LngLat(112.888, 28.114522);
      // 设置圆的半径大小
    }
  }
}
</script>
